<template>
  <div>
    <el-row v-if="type == '新增'">
      <el-form :model="form" :rules="rules" ref="ruleForm">
        <el-col :span="8">
          <el-form-item
            label="接入系统名称:"
            label-width="130px"
            prop="SystemName"
          >
            <el-input
              v-model="form.SystemName"
              autocomplete="off"
              placeholder="请输入接入系统名称"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="接入系统地址:"
            label-width="130px"
            prop="SystemAddress"
          >
            <el-input
              v-model="form.SystemAddress"
              autocomplete="off"
              placeholder="请输入接入系统地址"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="数据库类型:"
            label-width="130px"
            prop="DatabaseType"
          >
            <el-select
              v-model="form.DatabaseType"
              placeholder="请选择数据库类型"
              style="width: 100%"
              @change="ChangeDatabaseType"
            >
              <el-option
                :label="item.DatabaseTypeName"
                :value="item.DatabaseType"
                v-for="(item, index) in typeList"
                :key="index"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            label="数据库地址:"
            label-width="130px"
            prop="DatabaseAddress"
          >
            <el-input
              v-model="form.DatabaseAddress"
              autocomplete="off"
              placeholder="请输入数据库地址"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="数据库端口号:"
            label-width="130px"
            prop="DatabasePort"
          >
            <el-input
              v-model="form.DatabasePort"
              autocomplete="off"
              placeholder="请输入数据库端口号"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="数据库名称:"
            label-width="130px"
            prop="DatabaseName"
          >
            <el-input
              v-model="form.DatabaseName"
              autocomplete="off"
              placeholder="请输入数据库名称"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="数据库账户名称:"
            label-width="130px"
            prop="DatabaseUserName"
          >
            <el-input
              v-model="form.DatabaseUserName"
              autocomplete="off"
              placeholder="请输入数据库账户名称"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="数据库密码:"
            label-width="130px"
            prop="DatabasePassword"
          >
            <el-input
              type="password"
              show-password
              placeholder="请输入数据库密码"
              v-model="form.DatabasePassword"
            >
            </el-input>
          </el-form-item>
          <el-form-item label="备注:" label-width="130px">
            <el-input
              type="textarea"
              :rows="2"
              placeholder="请输入备注内容"
              v-model="form.Remark"
            >
            </el-input>
          </el-form-item>
          <div style="text-align: center; margin: 24px 0">
            <el-button plain style="margin-right: 24px" @click="back"
              >返 回</el-button
            >
            <el-button type="info" @click="test" :loading="loadingtest"
              >测试链接</el-button
            >
            <el-button type="primary" @click="submit" :loading="loading"
              >确 定</el-button
            >
          </div>
        </el-col>
      </el-form>
    </el-row>
    <el-row v-if="type == '详情'">
      <el-form :model="form" ref="ruleForm" :rules="rules">
        <el-col :span="8">
          <el-form-item
            label="接入系统名称:"
            label-width="130px"
            prop="SystemName"
          >
            <span>{{ form.SystemName }}</span>
          </el-form-item>
          <el-form-item
            label="接入系统地址:"
            label-width="130px"
            prop="SystemAddress"
          >
            <span>{{ form.SystemAddress }}</span>
          </el-form-item>
          <el-form-item
            label="数据库类型:"
            label-width="130px"
            prop="DatabaseType"
          >
            <span>{{ form.DatabaseTypeName }}</span>
          </el-form-item>
          <el-form-item
            label="数据库地址:"
            label-width="130px"
            prop="DatabaseAddress"
          >
            <span>{{ form.DatabaseAddress }}</span>
          </el-form-item>
          <el-form-item
            label="数据库端口号:"
            label-width="130px"
            prop="DatabasePort"
          >
            <span>{{ form.DatabasePort }}</span>
          </el-form-item>
          <el-form-item
            label="数据库名称:"
            label-width="130px"
            prop="DatabaseName"
          >
            <span>{{ form.DatabaseName }}</span>
          </el-form-item>
          <el-form-item
            label="数据库账户名称:"
            label-width="130px"
            prop="DatabaseUserName"
          >
            <span>{{ form.DatabaseUserName }}</span>
          </el-form-item>
          <el-form-item
            label="数据库密码:"
            label-width="130px"
            prop="DatabasePassword"
          >
            <span>{{ DatabasePassword }}</span>
          </el-form-item>
          <el-form-item label="备注:" label-width="130px">
            <span>{{ form.Remark }}</span>
          </el-form-item>
          <div style="text-align: center; margin: 24px 0">
            <el-button plain @click="back">返 回</el-button>
            <el-button type="primary" @click="edit" :loading="loading"
              >编 辑</el-button
            >
          </div>
        </el-col>
      </el-form>
    </el-row>
  </div>
</template>

<script>
import {
  GetDatabaseType,
  AccessManagement_post,
  AccessManagement_put,
  VerifyConnectionString_post,
} from "@/api/business";
import md5 from "js-md5";
export default {
  name: "VueXuAdminBasic",
  watch: {
    $route(to, from) {
      console.log(to.path, "to.path");
      if (to.path == "/xmGlAdd") {
        this.type = "新增";
        this.$refs.ruleForm.resetFields();
        this.Remark=""
      }
      if (to.path == "/xmGlDetails") {
        this.type = "详情";
        this.form = JSON.parse(localStorage.getItem("xmGlDetails"));
        this.getPass()
      }
    },
  
  },
  data() {
    return {
      form: {
        SystemCode: "",
        SystemName: "",
        SystemAddress: "",
        DatabaseType: "",
        DatabaseAddress: "",
        DatabasePort: "",
        DatabaseName: "",
        DatabaseUserName: "",
        DatabasePassword: "",
        DatabaseTypeName: "",
        Remark: "",
      },
      loading: false,
      loadingtest: false,
      typeList: [],
      DatabasePassword:"",
      type: localStorage.getItem("xmGlType"),
      rules: {
        SystemName: [
          {
            required: true,
            message: "请输入接入系统名称",
            trigger: ["change", "blur"],
          },
        ],
        SystemAddress: [
          {
            required: true,
            message: "请输入接入系统地址",
            trigger: ["change", "blur"],
          },
        ],
        DatabaseType: [
          {
            required: true,
            message: "请选择数据库类型",
            trigger: ["change", "blur"],
          },
        ],
        DatabaseAddress: [
          {
            required: true,
            message: "请输入数据库地址",
            trigger: ["change", "blur"],
          },
        ],
        DatabasePort: [
          {
            required: true,
            message: "请输入数据库端口号",
            trigger: ["change", "blur"],
          },
        ],
        DatabaseName: [
          {
            required: true,
            message: "请输入数据库名称",
            trigger: ["change", "blur"],
          },
        ],
        DatabaseUserName: [
          {
            required: true,
            message: "请输入数据库账户名称",
            trigger: ["change", "blur"],
          },
        ],
        DatabasePassword: [
          {
            required: true,
            message: "请输入数据库密码",
            trigger: ["change", "blur"],
          },
        ],
      },
    };
  },

  mounted() {
    console.log(this.type, "this.type");
    if (this.type == "详情") {
      this.form = JSON.parse(localStorage.getItem("xmGlDetails"));
      this.$refs.ruleForm.resetFields();
      this.getPass()
     
    }
    this.getType();
  },

  methods: {
    async getType() {
      let res = await GetDatabaseType();
      console.log(res, "type");
      this.typeList = res.data.response;
    },
    getPass(){
       // 密码文本 改为....
       let DatabasePassword = this.form.DatabasePassword.split("");
        let arr = [];
        DatabasePassword.forEach((item) => {
          arr.push("•");
        });
        this.DatabasePassword = arr.join("");
    },
    ChangeDatabaseType(data) {
      console.log(data);
      this.typeList.forEach((item) => {
        if (item.DatabaseType == data) {
          console.log(item, "item");
          this.form.DatabasePort = item.DefaultPort;
          this.form.DatabaseUserName = item.DefaultUserId;
          this.form.DatabaseTypeName = item.DatabaseTypeName;
        }
      });
    },
    edit() {
      this.type = "新增";
    },
    submit() {
      this.loading = true;
      this.$refs.ruleForm.validate(async (valid) => {
        if (!valid) {
          this.loading = false;
          return false;
        } else {
          if (localStorage.getItem("xmGlType") == "新增") {
            var res = await AccessManagement_post(this.form);
          }
          if (localStorage.getItem("xmGlType") == "详情") {
            var res = await AccessManagement_put(this.form);
          }

          if (res.data.success) {
            this.loading = false;
            this.$message({
              type: "success",
              message: res.data.msg,
            });
            if (localStorage.getItem("xmGlType") == "新增") {
              this.$router.push({
                path: "/xmGl",
              });
            }
          } else {
            this.loading = false;
            this.$message({
              type: "error",
              message: res.data.msg,
            });
          }
        }
      });
    },
    test() {
      this.loadingtest = true;
      let fieldsToValidate = [
        "DatabaseName",
        "DatabaseUserName",
        "DatabasePassword",
        "DatabaseAddress",
        "DatabasePort",
      ];
      Promise.all(
        fieldsToValidate.map((item) => {
          return new Promise((resolve, reject) => {
            this.$refs["ruleForm"].validateField(item, (result) => {
              resolve(result);
            });
          });
        })
      ).then((result) => {
        // result返回各个字段的验证信息，如果为空字符串则认为验证通过
        let msg = result.find(async (res) => {
          if (res != "") {
            this.loadingtest = false;
            return false;
          } else {
            let res = await VerifyConnectionString_post(this.form);
            this.loadingtest = false;
            if (res.data.success) {
              this.$message({
                type: "success",
                message: res.data.msg,
              });
            } else {
              this.$message({
                type: "error",
                message: res.data.msg,
              });
            }
          }
        });
      });

      
    },
    back() {
      this.$router.push({
        path: "/xmGl",
      });
    },
  },
};
</script>

<style  scoped>
/deep/.el-input-group__append {
  cursor: pointer;
}
/deep/.el-input-group__append:hover {
  cursor: pointer;
  color: #4965d2 !important;
  /* // border-color:#4965d2 !important; */
}
</style>
